<template>
  <div class="mapContent">
    <el-form :inline="true" :model="formInline" class="demo-form-inline query">
      <el-form-item label="定位">
        <el-input v-model="formInline.region" placeholder="输入地址"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onQuery">查询</el-button>
      </el-form-item>
    </el-form>
    <div id="container"></div>
    <el-button type="primary" @click="onSubmit" class="submitButton">提交</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formInline: {
        region: "",
      },
    };
  },
  methods: {
    onQuery() {
      let map = new BMap.Map("container");
      map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
      let local = new BMap.LocalSearch(map, {
        renderOptions: { map: map },
      });
      local.search(this.formInline.region);
    },
    onSubmit() {
      this.$router.go(-1);
      this.$router.replace("/confirmOrder");
    },
  },
  mounted() {
    let map = new BMap.Map("container");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    let local = new BMap.LocalSearch(map, {
      renderOptions: { map: map },
    });
    local.search("华南师范大学南海校区");
  },
};
</script>
<style scoped>
.query {
  margin-left: 15%;
}
.submitButton {
  margin-top: 10px;
  margin-left: 15%;
}
#container {
  margin: 10px 200px;
  width: 1000px;
  height: 400px;
}
</style>
